<template>
  <div class="knowledgeTypeEdit">
    <!-- 知识类型新增修改弹窗 -->
    <el-dialog
      :title="dailogType===0 ? '新增知识类型' : '知识类型编辑'"
      :visible.sync="dialogVisible"
      :show-close="true"
      :close-on-click-modal="false"
      :before-close="closeDailog"
    >
      <FormContainer :column="1">
        <el-form ref="form" :model="formData" :rules="formRules" label-width="100px">
          <el-form-item prop="typeName" label="知识类型名称">
            <el-input v-model="formData.typeName" placeholder="请输入类型名称" clearable />
          </el-form-item>
          <el-form-item prop="deptCode" label="使用业务组">
            <SearchSelectPicker
              ref="deptCodeSelect"
              url="/call-center/api/v1/businessGroup/page"
              placeholder="请选择使用业务组"
              lable-name="groupName"
              value-name="groupNo"
              multiple
              :lable.sync="formData.deptName"
              :value.sync="formData.deptCode"
            ></SearchSelectPicker>
          </el-form-item>
          <el-form-item prop="isAuditRequired" label="是否需要审核">
            <el-select v-model="formData.isAuditRequired" clearable filterable>
              <el-option label="是" :value="1" />
              <el-option label="否" :value="0" />
            </el-select>
          </el-form-item>
          <el-form-item v-if="formData.isAuditRequired" prop="auditor" label="审核人">
            <SearchSelectPicker
              ref="auditorSelect"
              url="/call-center/api/v1/staffInfo/page"
              placeholder="请选择审核人"
              value-name="accountNo"
              lable-name="staffName"
              :lable.sync="formData.auditorName"
              :value.sync="formData.auditor"
            ></SearchSelectPicker>
          </el-form-item>
          <el-form-item prop="remarks" label="备注">
            <el-input v-model="formData.remarks" type="textarea" :autosize="{minRows: 3}" clearable />
          </el-form-item>
        </el-form>
      </FormContainer>
      <span slot="footer" class="dialog-footer">
        <Button @click="closeDailog">取消</Button>
        <Button type="primary" :loading="loading" @click="confrim">{{ dailogType === 0 ? '创建' : '保存' }}</Button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import FormContainer from '@/components/FormContainer'
import Button from '@/components/Button'
import { createKonwledgeType, updateKonwledgeType, valideName } from '@/api/knowledgeType'
import SearchSelectPicker from '@/components/SearchSelectPicker'
export default {
  name: 'EnowledgeTypeEdit',
  components: {
    FormContainer,
    Button,
    SearchSelectPicker
  },
  props: {
    // roleArr: {
    //   type: Array,
    //   default: () => ([])
    // },
    auditorName: {
      type: Array,
      default: () => ([])
    },
    dailogType: {
      type: Number,
      default: 0
    }
  },
  data() {
    var infoTypeName = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请输入知识类型名称'))
      }
      valideName(value).then(res => {
        if (res.success === 1) {
          if (res.data === 1 && !this.formData) {
            return callback(new Error('该名称已存在，请重新输入'))
          } else {
            callback()
          }
        }
      })
    }
    return {
      dialogVisible: false,
      loading: false,
      formData: {},
      formRules: {
        typeName: [
          { required: true, validator: infoTypeName, trigger: 'blur' }
        ],
        deptCode: [
          { required: true, message: '请选择使用业务组', trigger: 'blur' }
        ],
        isAuditRequired: [
          { required: true, message: '请选择是否需要审核', trigger: 'blur' }
        ],
        auditor: [
          { required: true, message: '请选择审核人', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 打开弹窗
    openDailog(data) {
      if (data) {
        this.formData = data
      } else {
        this.formData = {
          typeName: '',
          deptCode: [],
          deptName: [],
          isAuditRequired: '',
          auditor: '',
          auditorName: '',
          remarks: ''
        }
      }
      this.dialogVisible = true
    },
    closeDailog() {
      this.$refs.form.resetFields()
      this.dialogVisible = false
    },
    // 确定按钮
    confrim() {
      this.loading = true
      this.$refs.form.validate((valid) => {
        if (valid) {
          const reqData = JSON.parse(JSON.stringify(this.formData))
          reqData.deptName = reqData.deptName.join(',')
          reqData.deptCode = reqData.deptCode.join(',')
          if (reqData.isAuditRequired === 0) {
            reqData.auditor = ''
            reqData.auditorName = ''
            reqData.state = 2
          }
          if (this.dailogType === 0) {
            createKonwledgeType(reqData)
              .then(res => {
                this.loading = false
                if (res.success === 1) {
                  this.closeDailog()
                  this.$emit('requestSinga', true)
                  this.$message({
                    message: '添加成功',
                    type: 'success'
                  })
                }
              }).catch(er => { this.loading = false })
          } else if (this.dailogType === 1) {
            updateKonwledgeType(reqData)
              .then(res => {
                this.loading = false
                if (res.success === 1) {
                  this.closeDailog()
                  this.$emit('requestSinga', false)
                  this.$message({
                    message: '修改成功',
                    type: 'success'
                  })
                }
              }).catch(er => { this.loading = false })
          }
        } else {
          this.loading = false
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>
<style lang='scss' module>
</style>
